<template>
  <div>
    <el-dropdown placement="bottom-end" trigger="click">
      <span class="el-dropdown-link">
        <svg-icon icon-class="help" class="navSvgSty" style="height: 1.7em;width: 1.7em;vertical-align: -0.5em;" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-tree ref="tree" :data="data" :props="defaultProps" :expand-on-click-node="false" :highlight-current="true" node-key="id" :default-expanded-keys="defaultKeys" @node-click="handleNodeClick">
          <span slot-scope="{ node}" class="span-ellipsis">
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </el-tree>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDirectory } from '../../api/help/help'
export default {
  name: 'Doc',
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  data() {
    return {
      defaultKeys: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    this.getHelpDirectory()
  },
  methods: {
    /* 递归加工数据加上id及pid及name去后缀*/
    dealData(arr) {
      const myArr = []
      arr.forEach(item => {
        if (item.isDir === true) {
          item.id = item.path
          item.children.forEach(citem => {
            if (citem.isDir && citem.isDir === true) {
              citem.pid = item.id
            } else {
              citem.pid = item.id
              citem.name = citem.name.split('.pdf')[0]
            }
          })
          this.dealData(item.children)
        } else {
          item.id = item.path
          item.name = item.name.split('.pdf')[0]
        }
        myArr.push(item)
      })
      return myArr
    },
    /* 获取目录*/
    getHelpDirectory() {
      const params = {
        appType: appType
      }
      getDirectory(params).then(data => {
        if (data) {
          this.data.push(data)
          this.data = this.dealData(this.data)
          this.data[0].name = '帮助文档'
          this.data[0].pid = '0'
          this.defaultKeys.push(this.data[0].id)
        }
      })
    },
    /* 目录树点击函数*/
    handleNodeClick(data) {
      const routeData = this.$router.resolve({
        path: `/help`,
        query: { id: data.id }
      })
      window.open(routeData.href, '_blank', 'height=' + screen.availHeight + ',width=' + screen.availWidth)
    }
  }
}
</script>
<style scoped lang="scss">
.el-tree {
  background: none !important;
  overflow: auto;
  border: none;
  z-index: 0;
  font-family: normal;
  width: 720px;
  .span-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
}
::v-deep .el-tree-node.is-current>.el-tree-node__content {
  font-weight: bold;
}
.el-tree ::v-deep  .el-icon-caret-right:before {
  font-size: 16px;
  display: block;
  border: 4px solid transparent;
  background-clip: padding-box;
}
</style>
